<template>
    <div>
        <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" label-width="120px"
            class="demo-ruleForm">
            <el-form-item label="用户名" prop="user">
                <el-input v-model="ruleForm.user" />
            </el-form-item>
            <el-form-item label="密码" prop="userpwd">
                <el-input v-model="ruleForm.userpwd" type="password" autocomplete="off" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)">登录</el-button>
                <el-button @click="resetForm(ruleFormRef)">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import type { FormInstance } from 'element-plus'

import { useRouter } from 'vue-router';

import { Login } from '@/server/userServer';

import InFo from "../components/index";

import { useListStore } from "../stores/counter";

const list = useListStore()

const router = useRouter()

const ruleFormRef = ref<FormInstance>()

const ruleForm = reactive({
    user: '',
    userpwd: '',
})

const rules = reactive({
    user: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { min: 3, max: 12, message: '用户名在3到12位', trigger: 'blur' },
    ],
    userpwd: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { pattern: /^[0-9a-z]{6,12}$/i, message: '密码只能由数字和字母组成，且6-12位', trigger: 'blur' },
    ],

})

const submitForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate(async (valid) => {
        if (valid) {
            const { data } = await Login({
                username: ruleForm.user,
                userpwd: ruleForm.userpwd
            })

            // console.log(data);
            if (data.code == 200) {
                localStorage.setItem('token', data.token)

                // if (data.menu === '学生') {
                //     router.addRoute('home', { path: '', name: 'leve', component: () => import('./addleve.vue') })
                // } else {
                //     router.addRoute('home', { path: '', name: 'leve', component: () => import('./leve.vue') })
                // }
                // console.log(router.getRoutes());
                // [{ path: "leave", msg: "请假管理", component: "leave", name: 'leave' }, { path: "student", msg: "学生管理", component: "student", name: 'student' }] : [{ path: "addleve", msg: "请假页面", component: "addleave", name: 'addleve' }]
                if (data.menu.length) {
                    //默认显示
                    const mnu = data.menu[0]
                    console.log(mnu);
                    router.addRoute('home', {
                        path: '',
                        name: 'leve',
                        component: InFo[mnu['component']]
                    })


                    // 载入全部路由
                    data.menu.forEach((item: any) => {
                        console.log(item);
                        router.addRoute('home', {
                            path: item.path,
                            name: item.name,
                            component: InFo[item.component]
                        })
                    });

                    list.increment(data.menu)
                    console.log(list.count);
                    localStorage.setItem('menu', JSON.stringify(data.menu))

                } 
                console.log(router.getRoutes());

                router.push('/home')



            } else {
                console.log('error submit!')
            }


        } else {
            console.log('error submit!')
            return false
        }
    })
}

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}

</script>

<style scoped>

</style>